<template>
  <div>
    <el-dialog :title="paramsData.col" :close-on-click-modal="false" :visible.sync="visible" center append-to-body>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="input1">
            <template slot="prepend">查找</template>
          </el-input>
          <div style="height: 350px;background-color: #fff;width: 100%;padding: 10px 15px;overflow-y: auto;">
            <div v-if="!resultShow">
              <h3>警告！</h3>
              <div>值列表过大或者连续值，请不要加载数据列表!</div>
              <el-button type="warning" @click="loadValues">加载</el-button>
            </div>
            <div v-if="resultShow">
              <div v-for="(item,index) in valueData" :key="index" @dblclick="conditionPitch(item)">{{item}}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
            <el-select v-model="paramsData.type" @change="typeChangeHandle" style="margin-bottom: 15px;">
              <el-option v-for="item in filterTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div style="margin-bottom: 15px;" v-if="paramsData.type == '=' || paramsData.type == '≠' || paramsData.type == '>' || paramsData.type == '<' || paramsData.type == '≥' || paramsData.type == '≤'">
              选定值
            </div>
            <div v-if="paramsData.type == '=' || paramsData.type == '≠'">
              <div v-if="paramsData.values.length == 0">
                <el-input v-model="paramsData.values[0]" class="input-with-select" style="margin: 5px 0;">
                  <el-button slot="append" icon="el-icon-delete"></el-button>
                </el-input>
              </div>
              <div v-else>
                <el-input v-for="(item,index) in paramsData.values" v-model="paramsData.values[index]" :key="index" class="input-with-select" style="margin: 5px 0;">
                  <el-button slot="append" icon="el-icon-delete" @click="filterItemDel(item,index)"></el-button>
                </el-input>
              </div>
            </div>
            <div v-if="paramsData.type == '>' || paramsData.type == '<' || paramsData.type == '≥' || paramsData.type == '≤'">
              <el-input v-model="paramsData.values[0]" class="input-with-select"></el-input>
            </div>
            <div v-if="paramsData.type == '(a,b]' || paramsData.type == '[a,b)' || paramsData.type == '(a,b)' || paramsData.type == '[a,b]'">
              <div>下限</div>
              <el-input v-model="paramsData.values[0]" class="input-with-select" style="margin: 5px 0;"></el-input>
              <div>上限</div>
              <el-input v-model="paramsData.values[1]" class="input-with-select" style="margin: 5px 0;"></el-input>
            </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveFilter" v-prevent-re-click>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getValues } from '@/api/cboard/cboard'


  export default {
    data() {
      return {
        visible: false,
        datasetId: '',
        filterIndex: '',
        paramsData: {},
        input1: '',
        resultShow: false,
        valueData: [],
        filterTypeOption: [
          {value: '=', label: '='},
          {value: '≠', label: '≠'},
          {value: '>', label: '>'},
          {value: '<', label: '<'},
          {value: '≥', label: '≥'},
          {value: '≤', label: '≤'},
          {value: '(a,b]', label: '(a,b]'},
          {value: '[a,b)', label: '[a,b)'},
          {value: '(a,b)', label: '(a,b)'},
          {value: '[a,b]', label: '(a,b)'}
        ]
      }
    },
    components: {},
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(datasetId,item,index){
        this.visible = true
        this.resultShow = false
        this.valueData = []

        this.datasetId = datasetId
        this.filterIndex = index
        this.paramsData = JSON.parse(JSON.stringify(item))
      },
      loadValues(){
        this.resultShow = true
        let formData = {
          datasetId: this.datasetId,
          colmunName: this.paramsData.col
        }
        getValues(formData).then(result => {
          this.valueData = result.data
          this.paramsData.values.forEach(item => {
            this.valueData = this.valueData.filter(item1 => {
              return item1 != item
            })
          })
        })
      },
      typeChangeHandle(val){
        this.valueData = this.valueData.concat(this.paramsData.values)
        this.paramsData.values = []
      },
      conditionPitch(data){
        // this.filterList.push(data)
        switch(this.paramsData.type){
          case '=': {
            this.paramsData.values.push(data)
            break
          };
          case '≠': {
            this.paramsData.values.push(data)
            break
          };
          case '>': {
            this.valueData.push(this.paramsData.values[0])
            this.paramsData.values[0] = data
            break
          };
          case '<': {
            this.valueData.push(this.paramsData.values[0])
            this.paramsData.values[0] = data
            break
          };
          case '≥': {
            this.valueData.push(this.paramsData.values[0])
            this.paramsData.values[0] = data
            break
          };
          case '≤': {
            this.valueData.push(this.paramsData.values[0])
            this.paramsData.values[0] = data
            break
          };
          case '(a,b]': {
            if(this.paramsData.values.length == 0){
              this.paramsData.values[0] = data
            }else{
              this.valueData.push(this.paramsData.values[1])
              this.paramsData.values[1] = data
            }
            break
          };
          case '[a,b)': {
            if(this.paramsData.values.length == 0){
              this.paramsData.values[0] = data
            }else{
              this.valueData.push(this.paramsData.values[1])
              this.paramsData.values[1] = data
            }
            break
          };
          case '(a,b)': {
            if(this.paramsData.values.length == 0){
              this.paramsData.values[0] = data
            }else{
              this.valueData.push(this.paramsData.values[1])
              this.paramsData.values[1] = data
            }
            break
          };
          case '[a,b]': {
            if(this.paramsData.values.length == 0){
              this.paramsData.values[0] = data
            }else{
              this.valueData.push(this.paramsData.values[1])
              this.paramsData.values[1] = data
            }
            break
          }
        }

        this.valueData = this.valueData.filter(item => {
          return item != data
        })
      },
      filterItemDel(data,index){
        this.paramsData.values.splice(index,1)
        this.valueData.push(data)
      },
      saveFilter(){
        let timestamp = new Date().getTime();
        this.paramsData.timestamp = (this.paramsData.timestamp) ? this.paramsData.timestamp : timestamp
        this.visible = false
        this.$emit('refreshParams',{datasetId: this.datasetId,data: this.paramsData,index: this.filterIndex})
      }
    }
  }
</script>

<style>

</style>
